import React, { useEffect } from 'react';
import AMapLoader from '@amap/amap-jsapi-loader';


const AMapExample = () => {

    const [MapCenter, setMapCenter] = React.useState<any>([115.48895, 38.81490])


    // 初始化地图
    // const initMap = () => {
    //     AMapLoader.load({
    //         "key": "2fbaa2940c0665416bd9111ab678e586",   // 申请好的Web端开发者Key，首次调用 load 时必填
    //         "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //         "plugins": [
    //             'AMap.Geolocation',
    //             'AMap.Marker'

    //         ]  //插件列表
    //     }).then((AMap) => {
    //         let amap = new AMap.Map('mapContainer', { // mapcontainer为容器的id
    //             viewMode: '2D', //使用3D视图
    //             zoom: 15, //初始化地图层级
    //             // center: [115.48895, 38.81490] //初始化地图中心点
    //             center: MapCenter //初始化地图中心点
    //         });
    //         // 定位
    //         let geolocation = new AMap.Geolocation({
    //             enableHighAccuracy: true, // 是否使用高精度定位，默认为true
    //             timeout: 10000, // 超过10秒后停止定位，默认：无穷大
    //             buttonPosition: 'RB', // 定位按钮的停靠位置
    //             buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
    //             zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
    //         });
    //         amap.addControl(geolocation);
    //         geolocation.getCurrentPosition();

    //         //为地图注册click事件获取鼠标点击出的经纬度坐标
    //         amap.on('click', function (e: any) {
    //             // console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat());
    //             setMapCenter([e.lnglat.getLng(), e.lnglat.getLat()])
    //         })

    //         // 高德地图根据经纬度获取地址
    //         let geocoder = new AMap.Geocoder({
    //             radius: 1000, //范围，默认：500
    //             extensions: "all" //返回地址信息
    //         });
    //         geocoder.getAddress([113.9448, 27.8293], function (status: any, result: any) {
    //             if (status === 'complete' && result.regeocode) {
    //                 var address = result.regeocode.formattedAddress; //返回地址描述
    //                 console.log(address);
    //             } else {
    //                 console.log('根据经纬度查询地址失败');
    //             }
    //         })





    //         // 标记
    //         let marker = new AMap.Marker({
    //             position: [113.9448, 27.8293]// 基点位置
    //         });
    //         // 地图添加标记
    //         amap.add(marker);
    //     }).catch(e => {
    //         console.log(e, ' error');
    //     })
    // }




    // 获取地址
    // const getAddress = (amap: any, lnglat: number[]) => {
    //     let geocoder = new AMap.Geocoder({
    //         radius: 1000, //范围，默认：500
    //         extensions: "all" //返回地址信息
    //     });
    //     geocoder.getAddress(lnglat, function (status: any, result: any) {
    //         if (status === 'complete' && result.regeocode) {
    //             var address = result.regeocode.formattedAddress; //返回地址描述
    //             console.log(address);
    //         } else {
    //             console.log('根据经纬度查询地址失败');
    //         }
    //     });
    // }

    // 添加标记
    const addMarker = (amap: any, lnglat: number[]) => {
        let marker = new AMap.Marker({
            position: lnglat // 基点位置
        });
        // 地图添加标记
        amap.add(marker);
    }

    // 获取地址
    const getAddress = (amap: any, lnglat: number[]) => {
        let geocoder = new amap.Geocoder({
            radius: 1000, //范围，默认：500
            extensions: "all" //返回地址信息
        });
        geocoder.getAddress(lnglat, function (status: any, result: any) {
            if (status === 'complete' && result.regeocode) {
                var address = result.regeocode.formattedAddress; //返回地址描述
                console.log(address);
            } else {
                console.log('根据经纬度查询地址失败');
            }
        });
    }



    // 初始化地图
    const initMap = () => {
        AMapLoader.load({
            "key": "2fbaa2940c0665416bd9111ab678e586",   // 申请好的Web端开发者Key，首次调用 load 时必填
            "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            "plugins": [
                'AMap.Geolocation',
                'AMap.Marker',
                'AMap.Geocoder'

            ]  //插件列表
        }).then((AMap) => {
            let amap = new AMap.Map('mapContainer', { // mapcontainer为容器的id
                viewMode: '2D', //使用3D视图
                zoom: 15, //初始化地图层级
                center: MapCenter //初始化地图中心点
            });
            // 定位
            let geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, // 是否使用高精度定位，默认为true
                timeout: 10000, // 超过10秒后停止定位，默认：无穷大
                buttonPosition: 'RB', // 定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true, // 定位成功后是否自动调整地图视野到定位点
            });
            amap.addControl(geolocation);
            geolocation.getCurrentPosition();

            //为地图注册click事件获取鼠标点击出的经纬度坐标
            amap.on('click', function (e: any) {
                setMapCenter([e.lnglat.getLng(), e.lnglat.getLat()]);
                console.log(MapCenter);
                
            });
            // 添加标记
            addMarker(amap, [113.9448, 27.8293]);
            // 调用获取地址
            getAddress(amap, [113.9448, 27.8293]);

        }).catch(e => {
            console.log(e, ' error');
        });
    }



    // 加载高德地图
    useEffect(() => {

        initMap()

    }, [MapCenter]);



    return (
        <>
            <div id="mapContainer" style={{ width: '100%', height: '60vh' }}>
            </div>
        </>

    );
};

export default AMapExample;
